
<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="执行记录"
        left-arrow
        @click-left="sy"
        fixed
    />
    <div style="margin-top: 50px;font-size: 17px;margin-left: -250px;height: 40px;border-top: 1px solid black;padding-top: 10px; box-shadow: 0 3px 5px rgba(0,0,0,0.3);">
      <span>基本信息</span>
    </div>
    <!-- 工单信息 -->
    <div class="ticket-list">
      <div class="ticket-item">
        <div class="ticket-header">
          <div class="ticket-id">工单编号：{{ data.code }}</div>
        </div>

        <div class="ticket-header">
          <div class="ticket-id">
            生成时间:{{ data.sctime }}
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            完成时间:{{ data.wctime }}
          </div>
        </div>
        <div class="ticket-header">
          <div class="ticket-id">
            执行人：{{ data.worker }}
          </div>
        </div>

      </div>
    </div>

    <div style="margin-top: 50px">

      <div>巡检点位</div>
      <div style="margin-top: 10px">
        <div v-for="item in data1">
          <div style="margin-left: -40px;margin-top: 20px;background-color: white;border: 1px black">
            <span>{{item.id}}</span><span style="margin-left: 30px">{{item.cleaningtasks}}</span><span style="margin-left: 30px">{{item.address}}</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "Workorderbjjlxq",
  data() {
    return {
      data: {},
      data1:[],
    }
  },
  created() {
    this.list();
    this.list1();
  },
  methods: {
    sy(){
      this.$router.push('/workorderbjjl')
    },
    list(){
      this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/findcode?code=`+this.$route.query.code).then(res => {
        this.data=res.data.data;
      })
    },
    list1() {
      this.axios.post(`http://localhost:9999/api-cleaning-service/cleaningtasks/list`).then(res => {
        this.data1 = res.data.data;
        console.log(this.data1);
      })
    },
  },
}
</script>



<style scoped>
.details-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 60px;
}

.ticket-list {
  padding: 12px;
  margin-top: 10px;
}

.ticket-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebedf0;
}

.ticket-id {
  font-size: 14px;
  color: #323233;
}

.ticket-priority {
  font-size: 14px;
  font-weight: 500;
}

.ticket-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-info {
  font-size: 13px;
  color: #646566;
  line-height: 1.5;
}

.ticket-info, .content-section {
  background: #fff;
  padding: 16px;
  margin-bottom: 8px;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  line-height: 20px;
}

.label {
  color: #646566;
  min-width: 90px;
  flex-shrink: 0;
}

.value {
  color: #323233;
  flex: 1;
}

#app {
  margin-top: -20px;
}

.title {
  height: 30px;
}

#zt {
  float: right;
  margin-right: 25px;
}
</style>